import { useMemo, useState } from "react";
import styles from "./index.module.less";
import SearchBox from "@/components/SearchBox";
import { TABS, getSearchOptions, getTableColumns, SECOND_OPTIONS, SECOND_TAB_VALUES, USE_RANGE_TABS } from "./constant";
import { Modal, Tabs, message, Button } from "antd";
import SuperTable from "@/components/SuperTable";
import cs from "classnames";
import { deleteDiscount, suspendDiscount, getDiscountList } from "@/api/modules/discount";
import { RESULT_CODES } from "@/api/helper/ResultCode";
import useUrl from "@/hooks/useUrl";
import { map } from "lodash";

export default () => {
	const { navigate } = useUrl();
	const productTypeList = map(USE_RANGE_TABS, (item: any) => ({
		...item,
		label: item?.label,
		value: item?.key
	}));
	const [params, setParams] = useState({});
	const [tabValueInfo, setTabValueInfo] = useState<any>({
		status: "discount"
	});
	const [typeTabValue, setTypeTabValue] = useState<any>({
		type: SECOND_TAB_VALUES.all
	});

	const handleSearch = (e: any) => {
		setParams(e);
	};

	const handleRequest = async (params: any, sortInfo: any) => {
		const requestData: any = {
			limit: params.pageSize,
			page: params.current,
			code: params?.code ?? "",
			// total_Type: tabValueInfo.status,
			type: typeTabValue.type,
			use_status: params?.use_status ?? ""
		};

		const res = await getDiscountList(requestData);
		return {
			total: res?.total ?? 0,
			data: res?.data ?? []
		};
	};

	const items = TABS;

	const view = {
			label: "查看",
			value: "view"
		},
		suspendEnum = {
			label: "停用",
			value: "suspend"
		},
		deleteEnum = {
			label: "删除",
			value: "delete"
		};

	const newColumns = [
		...getTableColumns({ params, productTypeList }),
		{
			title: "操作",
			width: 220,
			fixed: "right",
			dataIndex: "action-render",
			onClick: (key: string, record: any) => {
				switch (key) {
					case "view":
						navigate("/discount/detail", { state: record });
						break;
					case "suspend":
						Modal.confirm({
							icon: null,
							title: "停用提示？",
							content: `确认停用${record?.code}吗？`,
							closable: true,
							onOk: c => {
								suspendDiscount({ code: record?.code }).then((res: any) => {
									if (res?.code === RESULT_CODES.SUCCESS) {
										message.success("停用成功");
										c?.();
										setParams(e => ({
											...e,
											timeStamp: Date.now()
										}));
									}
								});
							}
						});
						break;
					case "delete":
						Modal.confirm({
							icon: null,
							title: "删除提示？",
							content: `确认删除${record?.code}吗？`,
							closable: true,
							onOk: c => {
								deleteDiscount({ code: record?.code }).then((res: any) => {
									if (res?.code === RESULT_CODES.SUCCESS) {
										message.success("删除成功");
										c?.();
										setParams(e => ({
											...e,
											timeStamp: Date.now()
										}));
									}
								});
							}
						});
						break;
				}
			},
			options: (record: any) => {
				return [view, suspendEnum, deleteEnum];
			}
		}
	];

	const handleGoCreatePage = () => {
		navigate("/discount/create");
	};

	const handleChangeTypeTab = (e: any) => {
		console.log(e, '<===========ee')
		setTypeTabValue({
			type: e
		});
	};

	const NEW_SEARCH_COLUMNS = useMemo(() => {
		return getSearchOptions(tabValueInfo);
	}, []);

	return (
		<div
			className={cs({
				[styles.container]: true
			})}
		>
			<Tabs
				items={items}
				defaultActiveKey="discount"
				activeKey={tabValueInfo.status}
				onChange={e => {
					setTabValueInfo({
						status: e
					});
					setParams({});
				}}
			/>
			<Tabs
				items={SECOND_OPTIONS}
				activeKey={typeTabValue.type}
				className={styles.secondTabs}
				type="card"
				onChange={e => handleChangeTypeTab(e)}
			/>
			<SearchBox key={tabValueInfo.status} columns={NEW_SEARCH_COLUMNS} onSearch={handleSearch}>
				<Button onClick={handleGoCreatePage}>创建优惠券</Button>
			</SearchBox>

			<SuperTable
				params={{
					...params,
					...tabValueInfo,
					...typeTabValue
				}}
				// bordered
				rowKey="code"
				columns={newColumns}
				request={handleRequest}
				scroll={{ x: "900" }}
			/>
		</div>
	);
};
